<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui-2.4.2/src/css/layui.css">
    <script type="text/javascript" src="/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/layui-2.4.2/src/layui.js"></script>
</head>
<body>
<div>
    <!--<div class="layui-row">-->
    <!--<div class="layui-form">-->
    <!--<div class="layui-form-item"-->
    <!--</div>-->
    <!--</div>-->
    <div class="layui-row">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">订单编号:</label>
                <div class="layui-input-inline">
                    <input type="text" id="order_sn_input" name="order_sn_input" required lay-verify="required" placeholder="请输入订单编号"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">手机号:</label>
                <div class="layui-input-inline">
                    <input type="text" id="order_phone_input" name="order_phone_input" required lay-verify="required" placeholder="请输入手机号"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">状态:</label>
                <div class="layui-input-inline">
                    <select name="status_select" class="status_select" lay-filter="status_select">
                        <option value="">全部</option>
                        <option value="0">已取消</option>
                        <option value="1">待支付</option>
                        <option value="2">待发货</option>
                        <option value="3">已发货</option>
                        <option value="4">已完成</option>
                        <option value="5">超时取消</option>
                    </select>
                </div>

                <button class="layui-btn" id="search">搜索</button>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">订单类型:</label>
                <div class="layui-input-inline">
                    <select name="order_type_select" class="order_type_select" lay-filter="order_type_select">
                        <option value="">全部</option>
                        <option value="1">普通订单</option>
                        <option value="2">蜜糖订单</option>
                        <option value="3">混合订单</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <table id="product_order_view" lay-filter="product_order_filter">

        </table>
    </div>
</div>
<form class="layui-form" id="order_detail" action="" style=" display:none;margin-left: 3%;margin-right: 3%">
    <div class="layui-form-item">
        <table id="product_order_detail_view" lay-filter="product_order_filter">

        </table>
    </div>
</form>
</body>


<script>
    layui.use(['element', 'table', 'upload', 'laytpl', 'form'], function () {
        var table = layui.table;
        table.render({
            elem: '#product_order_view',
            url: '/productOrder/queryList',

            page: true,
            limit: 10,
            limits: [10, 20, 50, 100],
            cols: [
                [

                    {field: 'productOrderSn', title: '订单编号', width: 200},
                    {field: 'userName', title: '下单人', width: 120},
                    {field: 'accountId', title: '下单人Id', width: 120},
                    {field: 'contactName', title: '联系人', width: 120},
                    {field: 'address', title: '地址', width: 200},
                    {field: 'orderType', title: '订单类型', width: 120, templet: function (d) {
                            var orderType = "";
                            if (d.orderType === 1){
                                orderType = "RMB支付";
                            }
                            if (d.orderType === 2){
                                orderType = "FMT支付";
                            }
                            if (d.orderType === 3){
                                orderType = "混合支付";
                            }
                            return orderType
                        }},
                    {field: 'moneyOrder', title: '订单金额', width: 120, templet: function (d) {
                            var money = d.moneyOrder+"RMB";
                            return money
                        }},
                    {field: 'honeySugarOrder', title: 'FMT金额', width: 120},
                    {field: 'deductionFmtAmount', title: '用来抵扣的FMT数量', width: 200, templet: function (d) {
                            var money = "用"+d.deductionFmtAmount+"FMT抵扣"+d.fmtDeductionRmb+"的RMB";
                            if (d.deductionFmtAmount === 0 && d.fmtDeductionRmb===0){
                                money = "未使用抵扣";
                            }
                            return money
                        }},
                    {field: 'paymentAmount', title: '实付金额', width: 120, templet: function (d) {
                            var money = "";
                            if (d.orderType === 1){
                                money = d.paymentAmount+"RMB";
                            }
                            if (d.orderType === 2){
                                money = d.paymentAmount+"FMT";
                            }
                            return money
                        }},
                    {field: 'totalFee', title: '手续费', width: 120, templet: function (d) {
                            var money = "";
                            if (d.orderType === 2){
                                money = d.totalFee+"FMT";
                            }
                            return money
                        }},
                    {field: 'contactPhone', title: '联系电话', width: 150},
                    {field: 'createTime', title: '创建时间', width: 150},
                    {
                        field: 'orderStatus', width: 100, title: '状态', templet: function (d) {
                        if (d.orderStatus === 0)return '已取消';
                        if (d.orderStatus === 1)return '待支付';
                        if (d.orderStatus === 2)return '待发货';
                        if (d.orderStatus === 3)return '已发货';
                        if (d.orderStatus === 4)return '已完成';
                        if (d.orderStatus === 5)return '订单超时过期';
                    }
                    },
                    {field: 'right', width: 200, align: 'center', title: '操作', toolbar: '#toolOper'}

                ]
            ],
            response: {
                status: 'errorCode',
                countName: 'total',
                dataName: 'data'
            }
        });

        table.on('tool(product_order_filter)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'success') {
                $.ajax({
                    type: 'get',
                    data: {'productOrderId': data.id, orderStatus: 4},
                    url: '/productOrder/updateStatus',
                    cache: false,
                    success: function (data) {
                        $(".layui-laypage-btn").click();
                    }
                });
            }


            if(layEvent ==='deliver'){
                $.ajax({
                    type: 'get',
                    data: {'productOrderId': data.id, orderStatus: 3},
                    url: '/productOrder/updateStatus',
                    cache: false,
                    success: function (data) {
                        $(".layui-laypage-btn").click();
                    }
                });


            }

            if (layEvent === 'cancel') {
                $.ajax({
                    type: 'get',
                    data: {'productOrderId': data.id, orderStatus: 0},
                    url: '/productOrder/updateStatus',
                    cache: false,
                    success: function (data) {
                        $(".layui-laypage-btn").click();
                    }
                });
            }

            if (layEvent === 'detail') {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: false, //不显示关闭按钮
                    anim: 2,
                    shadeClose: true, //开启遮罩关闭
                    area: ['80%', '70%'],
                    title: "订单详情",
                    content: $("#order_detail")
//                    content:"内容"
                });
                table.render({
                    elem: '#product_order_detail_view',
                    url: '/productOrder/queryOrderDetail?orderSn=' + data.productOrderSn,
                    page: false,
                    cols: [
                        [
                            {field: 'productOrderSn', title: '订单编号'},
                            {field: 'productName', title: '商品名称'},
                            {field: 'productPrice', title: '单价'},
                            {field: 'buyNumber', title: '购买数量'},
                            {field: 'specParentId', title: '商品父类'},
                            {field: 'specSonId', title: '商品子类'}
                        ]
                    ],
                    response: {
                        status: 'errorCode',
                        countName: 'total',
                        dataName: 'data'
                    }
                });
            }


        });

        $("#search").on('click',function(){
            table.reload('product_order_view',{
                url:'/productOrder/queryList',
                where:{
                    orderSn:$('#order_sn_input').val(),
                    phone:$('#order_phone_input').val(),
                    status:$('.status_select').val(),
                    orderType:$('.order_type_select').val()
                }
            });
        });
    });
</script>

<script type="text/html" id="toolOper">

    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    {{#  if(d.orderStatus == 3){ }}
    <a class="layui-btn layui-btn-xs" lay-event="success">完成</a>
    {{#  } }}
    {{#  if(d.orderStatus == 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="deliver">发货</a>
    {{#  } }}
    {{#  if(d.orderStatus < 3&d.orderStatus > 0 ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="cancel">取消</a>
    {{#  } }}
</script>
</html>